<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue路由开发-嵌套路由</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <router-link to="/user" tag="button">用户管理</router-link>
        <router-view></router-view>
    </div>

    <!-- 用户组件 -->
    <template id="userIndex">
        <div>
            <h1>用户管理</h1>
            <router-link to="/user/add" tag="button">添加用户</router-link>
            <!-- 用户列表组件 -->
            <router-link to="/user/list" tag="button">用户列表</router-link>
            <router-view></router-view>
        </div>
    </template>
    <!-- 添加用户组件 -->
    <template id="userAdd">
        <div>
            <h1>添加用户</h1>
            <div>
                <input type="text" name="username" placeholder="用户名">
                <input type="text" name="email" placeholder="邮箱">
                <input type="text" name="phone" placeholder="手机">
                <input type="text" name="address" placeholder="地址">
                <button>提交</button>
            </div>
        </div>
    </template>
    <!-- 用户列表组件 -->
    <template id="userList">
        <div>
            <h1>用户列表</h1>
            <table>
                <tr>
                    <th>编号</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>手机</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>
                        356563564@qq.com
                    </td>
                    <td>13888888888</td>
                    <td>北京</td>
                    <td>
                        <router-link to="/user/edit/1" tag="button">修改</router-link>
                        <button>删除</button>
                    </td>
                </tr>
                </tr>
            </table>
        </div>
    </template>
    <!-- 修改用户组件 -->
    <template id="userEdit">
        <div>
            <h1>修改用户</h1>
            <p>接收到的id值为:{{this.$route.params.id}}</p>
            <div>
                <input type="text" name="username" placeholder="用户名">
                <input type="text" name="email" placeholder="邮箱">
                <input type="text" name="phone" placeholder="手机">
                <input type="text" name="address" placeholder="地址">
                <button>提交</button>
                <router-link to="/user/list" tag="button">取消</router-link>
            </div>
        </div>
    </template>
</body>

</html>
<script type="module">
    import { } from './js/vue.js'
    import { } from './js/vue-router.js'

    // 定义组件
    const userIndex = {
        template: '#userIndex'
    }
    const userAdd = {
        template: '#userAdd'
    }
    const userList = {
        template: '#userList'
    }
    const userEdit = {
        template: '#userEdit'
    }

    // 创建路由规则
    const routes = [
        {
            path: '/user', component: userIndex,
            children: [
                { path: '/', redirect: 'list' },
                { path: 'add', component: userAdd },
                { path: 'list', component: userList },
                { path: 'edit/:id', component: userEdit }
            ]
        }
    ]

    const router = new VueRouter({
        routes
    })

    const app = new Vue({
        el: '#app',
        data: {
            msg: 'vue路由开发-嵌套路由'
        },
        router
    })
</script>